import React from 'react'
import {Row,Col, Table, Input, Popconfirm,Button,  Dropdown,Icon ,Menu, Modal} from 'antd';

import AddLink from './Modalform'
import DropOption from '../Link/DownMenu'
import reqwest from 'reqwest';

import '../Link/LinkMana.less';

const confirm = Modal.confirm;

class TableCustom extends React.Component {
  state = {
    data:[],
    searchData:[],
    modelVisible:false,
    rowData:'2',
    pagination: {},
    loading: false,
    status:'create'
  }
  handleTableChange = (pagination, filters, sorter) => {
   
    const pager = { ...this.state.pagination };
    
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch = (params = {}) => {
    this.setState({ loading: true });
    reqwest({
      url:'http://admin.mapboom.cn/portal/v1.0/outside_link/list',
      method: 'get',
      data: {
        per_page:10,
        ...params,
      },
      type: 'json',
    }).then((data) => {
      const pagination = { ...this.state.pagination };
      pagination.total = data.total;
      pagination.pageSize = data.per_page
      
      this.setState({
        loading: false,
        data: data.data,
        searchData:data.data,
        pagination,
      });
    });
  }
  componentDidMount() {
    this.fetch()
  
  }

  update=(row,status)=>{
    this.setState({
      modelVisible:true,
      rowData:row,
      status:status?status:'create'
    })
  }
  resetTable=()=>{
    const pager = { ...this.state.pagination };
    pager.current = 1;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      current:1
    });
  }
  handleModelCancel = () => {
    this.setState({
      modelVisible: false,
    });
  }
  deleteLink = (id) => {
    reqwest({
      url:`http://admin.mapboom.cn/portal/v1.0/outside_link?id=${id}`,
      method: 'delete',
      type: 'json',
    }).then((data) => {
      this.fetch();
    });
  }
  
  render() {
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      this.update(record,'update');
    } else if (e.key === '2') {
      let that = this;
      confirm({
        title: `你确定要删除${record.title}吗?`,
        onOk () {
          that.deleteLink(record.id)
        },
      })
    }
  }

  const columns = [...this.props.stateArr,
    { title: 'Action', dataIndex: '',width:'200' , 
          render: (text, record) => {
            return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改' }, { key: '2', name: '删除' }]} />
          }},
    ]
  return (
    <div>
      <div>
      <Row type="flex" justify="space-between" style={{"margin-bottom": "10px"}}>
        <Col xl={{ span: 18 }} md={{ span:16 }}>
          
        </Col>
        <Col xl={{ span: 6 }} md={{ span: 8 }} style={{"text-align":"right"}}>
          <Button onClick={this.update}>添加</Button>
        </Col>
      </Row>
      <AddLink
          stateArr={this.props.stateArr} 
          status={this.state.status} 
          rowData={this.state.rowData} 
          handleModelCancel={this.handleModelCancel.bind(this)} 
          visible={this.state.modelVisible} 
          resetTable={this.resetTable.bind(this)}
          />
        <Table columns={columns} 
               rowKey={record => record.id}
              dataSource={this.state.data}
              pagination={this.state.pagination}
              loading={this.state.loading}
              onChange={this.handleTableChange} 
              bordered 
                 />
      </div>

    </div>
  )
  }
}

export default TableCustom
